<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="专户管理">
			<view slot="right" @click="search"><u-icon name="search" size="20" color="#162233"></u-icon></view>
		</u-navbar>

		<view class="d-p-30">
			<view class="card d-p-30">
				<view class="d-flex d-m-b-30"><view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">专户统计</view></view>
				<chart :acc="acc"></chart>
			</view>

			<view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">保证金专户</text></view>
			<!-- <view class="card d-m-t-30" style="padding: 100rpx 0;"><u-empty icon="/static/image/none.png" text="暂无数据源"></u-empty></view> -->
			<view class="card d-p-30 d-m-t-30"><chartNew :acc="accsb"></chartNew></view>

			<view class="d-flex d-m-t-30 d-font-32" style="font-weight: bold;">
				<view class="d-flex-1 min-card d-col-top" @click="specialDetail">
					<view class="d-p-t-30 d-p-l-30 d-flex-1">工资专户</view>
					<view class="ic"><u--image src="/static/icon/icon-87.png" width="150rpx" height="80rpx"></u--image></view>
				</view>
				<view class="d-flex-1 d-m-l-20 min-card d-col-top" @click="otherInfo">
					<view class="d-p-t-30 d-p-l-30 d-flex-1">保证金专户</view>
					<view class="ic"><u--image src="/static/icon/icon-86.png" width="125rpx" height="80rpx"></u--image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import chart from './components/chart.vue';
import chartNew from './components/chartNew.vue';
import { accStatistics, accsb } from '../../../common/api.js';
export default {
	components: {
		chart,
		chartNew
	},
	data() {
		return {
			acc: null,
			accsb: null
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			accStatistics({
				params: {
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.acc = e.data;
			});
			accsb({
				params: {
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.accsb = e.data;
			});
		},
		search() {
			uni.$u.route({ url: '/pages/index/special/search' });
		},
		specialDetail() {
			uni.$u.route({ url: '/pages/index/special/specialDetail' });
		},
		otherInfo() {
			uni.$u.route({ url: '/pages/index/special/otherInfo' });
		}
	}
};
</script>

<style lang="scss">
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
	.sub-title {
		position: relative;
		padding-left: 20rpx;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 8rpx;
			height: 22rpx;
			background: #13a4fe;
			border-radius: 4rpx;
			bottom: 0;
			margin: auto;
		}
	}
}
page {
	background-color: #fbfcfc;

	.min-card {
		height: 150rpx;
		background: #e8f4ff;
		border-radius: 16rpx;
		position: relative;
		.ic {
			position: absolute;
			bottom: 0;
			right: 0;
			overflow: hidden;
		}
	}
}
</style>
